<script setup>

import {onLoad} from "@dcloudio/uni-app";
import {ref, getCurrentInstance} from "vue";
import {getQQPoiAPI} from "../../services/search";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";

const commonInfoStore = useCommonInfoStore() // 使用commonInfoStore状态管理器
const latitude = ref()
const longitude = ref()
const cityName = ref()
const keyword = ref()
const selectIndex = ref(0)
const poises = ref([])
const instance = getCurrentInstance().proxy

onLoad((ops) => {
  latitude.value = ops.lat
  longitude.value = ops.log
  cityName.value = ops.cityName
  keyword.value = ops.keyWord
  searchLocation()
  console.log(" Math.pow(10000*(1+0.01), 60)", Math.pow(10000*(1+0.01), 70))
})
const searchLocation = async () => {
  const res = await getQQPoiAPI(latitude.value, longitude.value, keyword.value)
  console.log("搜索res", res)
  poises.value = res.result.data
}
const search = () => {
  searchLocation()
}
const okSelect = (item, index) => {
  selectIndex.value = index
  // if (cityName.value !== item.ad_info.city) {
  //
  //   uni.showToast({title: "不能选择其他城市", icon: 'none'})
  //   return
  // }
  uni.setStorageSync('lat', item.location.lat);
  uni.setStorageSync('lng', item.location.lng);
  uni.setStorageSync('address', item.title);
  const province = item.ad_info.province
  const city = item.ad_info.city
  const district = item.ad_info.district
  const address = item.address
  const lat = item.location.lat
  const lng = item.location.lng
  const addressRes = {province, city, district, address, lat, lng}
  console.log("addressRes", addressRes)
  commonInfoStore.setAddressDel(addressRes)
  const eventChannel = instance.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {
    data: {"name": item.title, "latitude": item.location.lat, "longitude": item.location.lng,'city' : city}
  });
  uni.navigateBack()
}
const back = () => {
  uni.navigateBack()
}
</script>

<template>
  <view>
    <!-- #ifdef MP -->
    <u-navbar
        title="搜索位置"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        auto-back
        bgColor="#FDE52F"
    >
    </u-navbar>
    <!--#endif-->
    <!-- #ifdef APP-PLUS || H5-->
    <view style="position: fixed; z-index: 100;width: 100%;background-color: white">
      <u-status-bar></u-status-bar>
      <view class="map-top" style="width: 100%">
        <view class="sousuokuang" style="display: flex;padding: 16rpx 20rpx;">
          <!-- #ifdef APP-PLUS || H5-->
          <view style="display: flex;align-items: center;margin-right: 10rpx" @click="back">
            <u-icon name="arrow-left" size="22" color="#666666"></u-icon>
          </view>
          <!--#endif-->
          <u-search placeholder="搜索位置" color="#333" :focus="true" search-icon-color="#999" v-model="keyword"
                    :show-action="false" bg-color="#f7f7f7" showAction actionText="搜索" animation @search="search"
                    @custom="search">
          </u-search>
        </view>
      </view>
    </view>
    <!--#endif-->
    <view class="map-wrap">
      <u-status-bar></u-status-bar>
      <view style="height: 68rpx">
      </view>
      <view class="x-weizhi-list-wrap">
        <view class="addresxuanze" :class="[index === selectIndex ? 'xzbgcolor' : '']" v-for="(item,index) in poises"
              :key="index" @click="okSelect(item,index)">
          <view class="xiangxidizhi">
            <view>{{ item.title }}</view>
            <view>{{ item.address }}</view>
          </view>
          <view class="xuanzicon" v-if="index === selectIndex ">
            <u-icon name="checkmark-circle-fill" size="22" color="#333333"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.map-wrap {
  padding: 30rpx;

  .map-top {
    background-color: #ffffff;

    .bianbiano {
      width: 100rpx;
      height: 10rpx;
      background-color: #eaeaea;
      border-radius: 200rpx;
      margin: 30rpx auto 30rpx;
    }
  }

  .xzbgcolor {
    background-color: #ffe62e !important;
    color: #333333 !important;

    view:nth-child(2) {
      color: #333333 !important;
    }
  }

  .sousuokuang {
    margin-bottom: 30rpx;
    display: flex;
  }

  .x-weizhi-list-wrap {
    padding: 0 0 0 0;

    .addresxuanze {
      background-color: #f7f7f7;
      border-radius: 14rpx;
      padding: 26rpx 20rpx;
      margin-bottom: 30rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .xiangxidizhi {
        view:nth-child(1) {
          margin-bottom: 10rpx;
          font-size: 32rpx;
          font-weight: bold;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        view:nth-child(2) {
          display: flex;
          align-items: center;
          color: #9199bc;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .xuanzicon {
        //position: absolute;
        //right: 12rpx;
        //top: 16rpx;
      }
    }
  }
}
</style>